<template>
  <div class="improved-action-buttons">
    <a-card title="✨ 改进后的操作按钮（使用 Iconify 图标）" class="demo-card">
      
      <!-- 搜索区域 -->
      <div class="search-section">
        <a-input-search
          v-model:value="searchValue"
          placeholder="搜索人员..."
          style="width: 300px;"
          @search="handleSearch"
        >
          <template #prefix>
            <Icon icon="material-symbols:search" />
          </template>
        </a-input-search>
        
        <a-button @click="clearSearch">
          <template #icon><Icon icon="material-symbols:clear" /></template>
          清空
        </a-button>
      </div>

      <!-- 主要操作按钮 -->
      <div class="main-actions">
        <h3>主要操作</h3>
        <a-space wrap>
          <a-button type="primary" size="large">
            <template #icon><Icon icon="material-symbols:person-add" /></template>
            新增人员
          </a-button>
          
          <a-button danger size="large" :disabled="selectedCount === 0">
            <template #icon><Icon icon="material-symbols:delete" /></template>
            批量删除 ({{ selectedCount }})
          </a-button>
          
          <a-button size="large">
            <template #icon><Icon icon="material-symbols:upload" /></template>
            导入数据
          </a-button>
          
          <a-button size="large">
            <template #icon><Icon icon="material-symbols:download" /></template>
            导出数据
          </a-button>
          
          <a-button size="large">
            <template #icon><Icon icon="material-symbols:team-dashboard" /></template>
            队伍管理
          </a-button>
        </a-space>
      </div>

      <!-- 游戏相关操作 -->
      <div class="game-actions">
        <h3>游戏操作</h3>
        <a-space wrap>
          <a-button type="primary">
            <template #icon><Icon icon="material-symbols:sports-esports" /></template>
            开始匹配
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:leaderboard" /></template>
            查看排行榜
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:trophy" /></template>
            成就系统
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:analytics" /></template>
            数据分析
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:military-tech" /></template>
            军衔系统
          </a-button>
        </a-space>
      </div>

      <!-- 系统操作 -->
      <div class="system-actions">
        <h3>系统操作</h3>
        <a-space wrap>
          <a-button>
            <template #icon><Icon icon="material-symbols:settings" /></template>
            系统设置
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:refresh" /></template>
            刷新数据
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:backup" /></template>
            数据备份
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:help" /></template>
            帮助文档
          </a-button>
          
          <a-button>
            <template #icon><Icon icon="material-symbols:info" /></template>
            关于系统
          </a-button>
        </a-space>
      </div>

      <!-- 状态指示器 -->
      <div class="status-indicators">
        <h3>状态指示器</h3>
        <a-space wrap>
          <a-tag color="success">
            <Icon icon="material-symbols:check-circle" style="margin-right: 4px;" />
            系统正常
          </a-tag>
          
          <a-tag color="processing">
            <Icon icon="material-symbols:sync" style="margin-right: 4px;" />
            同步中
          </a-tag>
          
          <a-tag color="warning">
            <Icon icon="material-symbols:warning" style="margin-right: 4px;" />
            需要注意
          </a-tag>
          
          <a-tag color="error">
            <Icon icon="material-symbols:error" style="margin-right: 4px;" />
            系统错误
          </a-tag>
        </a-space>
      </div>

      <!-- 快捷操作面板 -->
      <div class="quick-panel">
        <h3>快捷操作面板</h3>
        <div class="quick-grid">
          <a-card size="small" hoverable class="quick-item">
            <div class="quick-content">
              <Icon icon="material-symbols:group" style="font-size: 32px; color: #1890ff;" />
              <h4>人员总数</h4>
              <p class="number">{{ totalPersonnel }}</p>
            </div>
          </a-card>
          
          <a-card size="small" hoverable class="quick-item">
            <div class="quick-content">
              <Icon icon="material-symbols:trending-up" style="font-size: 32px; color: #52c41a;" />
              <h4>胜率统计</h4>
              <p class="number">{{ averageWinRate }}%</p>
            </div>
          </a-card>
          
          <a-card size="small" hoverable class="quick-item">
            <div class="quick-content">
              <Icon icon="material-symbols:star" style="font-size: 32px; color: #faad14;" />
              <h4>平均天梯分</h4>
              <p class="number">{{ averageMMR }}</p>
            </div>
          </a-card>
          
          <a-card size="small" hoverable class="quick-item">
            <div class="quick-content">
              <Icon icon="material-symbols:shield" style="font-size: 32px; color: #722ed1;" />
              <h4>活跃队伍</h4>
              <p class="number">{{ activeTeams }}</p>
            </div>
          </a-card>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="usage-info">
        <a-alert
          message="Iconify 图标使用优势"
          type="info"
          show-icon
        >
          <template #description>
            <ul>
              <li>🎨 <strong>丰富的图标库：</strong>支持 100+ 图标集，超过 10 万个图标</li>
              <li>⚡ <strong>按需加载：</strong>只加载使用的图标，减少包体积</li>
              <li>🎯 <strong>统一接口：</strong>使用统一的 <code>&lt;Icon icon="..." /&gt;</code> 语法</li>
              <li>🔧 <strong>易于替换：</strong>可以轻松切换不同风格的图标</li>
              <li>📱 <strong>响应式：</strong>支持 SVG，在任何分辨率下都清晰</li>
            </ul>
          </template>
        </a-alert>
      </div>

    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const searchValue = ref('')
const selectedCount = ref(3)
const totalPersonnel = ref(156)
const averageWinRate = ref(67.8)
const averageMMR = ref(4250)
const activeTeams = ref(12)

// 方法
const handleSearch = (value) => {
  console.log('搜索:', value)
}

const clearSearch = () => {
  searchValue.value = ''
}
</script>

<style scoped>
.improved-action-buttons {
  padding: 20px;
}

.demo-card {
  max-width: 1200px;
  margin: 0 auto;
}

.search-section {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.main-actions,
.game-actions,
.system-actions,
.status-indicators,
.quick-panel {
  margin-bottom: 32px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.main-actions h3,
.game-actions h3,
.system-actions h3,
.status-indicators h3,
.quick-panel h3 {
  margin-bottom: 16px;
  color: #1890ff;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.quick-item {
  text-align: center;
}

.quick-content {
  padding: 16px;
}

.quick-content h4 {
  margin: 12px 0 8px 0;
  color: #262626;
}

.quick-content .number {
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
  margin: 0;
}

.usage-info {
  margin-top: 32px;
}

.usage-info ul {
  margin: 8px 0;
  padding-left: 20px;
}

.usage-info code {
  background: #f6f8fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

@media (max-width: 768px) {
  .search-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
</style>
